<template>
	<page-meta :page-style="`overflow:${AiFloatingWindow.opened ? 'hidden' : 'visible'};`">
		<view class="content">
			<!-- 顶部轮播 + 宫格 + 广告 -->
			<view class="mian-content-top">
				<view class="mian-swiper">
					<u-swiper :list="swiperList" previousMargin="30" nextMargin="30" circular :autoplay="true"
						radius="5" bgColor="#02a0ff" @click="swiperClick"></u-swiper>
				</view>
				<view class="mian-menu">
					<!-- 重写宫格模型-->
					<view class="menu-grid">
						<view class="menu-grid-item col-xl-3" v-for="(item,index) in gridList">
							<view class="item-view" @click="gridClick(index)">
								<!-- 图标 -->
								<u-icon :name="item.name" color="#0f172a" size="28"></u-icon>
								<!-- 菜单文字 -->
								<span>{{item.title}}</span>
							</view>
						</view>
					</view>
					<view class="mian-advert">
						<view class="title">
							<h2>来福州 · 没啥玩的</h2>
							<p>龙年不登床</p>
							<p>也没有早午茶</p>
							<p>更没有夜游</p>
						</view>
						<view class="pic">
							<img src="https://cdn.uviewui.com/uview/swiper/swiper3.png">
						</view>
					</view>
				</view>
			</view>
			<!-- 这儿是景点数据  弹性布局 + 2个对半 wrap -->
			<view class="journey rev-mrb-10">
				<view class="row">
					<view class="col-xl-6" v-for="item in journeyList">
						<view class="recommend mrb-10">
							<view class="title">
								<h2>{{item.title}}</h2>
								<p v-for="tag in item.tags">
									{{tag.name}}
								</p>
							</view>
							<view class="pic">
								<img :src="item.url" mode="widthFix">
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 其他数据显示地儿 -->
			<u-sticky bgColor="#fafafa">
				<u-tabs :list="tabList" @click="tabClick"></u-tabs>
			</u-sticky>
			<!-- 列表显示地方 -->
			<view class="info-list pdb-10">
				<view v-for="(item, index) in infoList" :key="index">
					<u-cell :title="item.title" :label="`列表长度-${index + 1}`">
						<view slot="value">
							<text class="price" v-if="item.price">
								{{item.price}}
							</text>
						</view>
						<u-image slot="icon" :src="item.url" width="80" height="80"></u-image>
					</u-cell>
				</view>

				<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
					:nomore-text="nomoreText" line />
			</view>
			<journey-AiExchange :isDock="true" :existTabBar="true"></journey-AiExchange>
			<view class="placeholder"></view>
		</view>
	</page-meta>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: {
			...mapGetters(['user', 'AiFloatingWindow']), // 取出vuex中用户数据
		},
		data() {
			return {
				// 底部加载条
				loadStatus: 'loadmore',
				// 自定义加载文字样式
				loadingText: '努力加载中',
				loadmoreText: '往下划划看',
				nomoreText: '实在没有了',
				// 轮播
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				// 宫格
				gridList: [{
						name: 'account-fill',
						title: '我的'
					},
					{
						name: 'bag-fill',
						title: '周边'
					},
					{
						name: 'server-man',
						title: '客服中心'
					},
					{
						name: 'account-fill',
						title: '故事游玩',
						url: '/pages/story/index/index'
					},
					{
						name: 'bag-fill',
						title: '周边'
					},
					{
						name: 'server-man',
						title: '客服中心'
					},
					{
						name: 'bag-fill',
						title: '周边'
					},
					{
						name: 'server-man',
						title: '客服中心'
					},
				],
				// 推荐景点("4-6条数据")
				journeyList: [{
					// 名字
					title: '三坊七巷',
					// 标签
					tags: [{
							name: '热门玩法',
						},
						{
							name: '背景历史',
						},
						{
							name: '特惠指南',
						},
					],
					// 图片素材
					url: require('@/static/advert/3f7x.png'),
				}, {
					// 名字
					title: '镇海楼',
					// 标签
					tags: [{
							name: '特不好玩',
						},
						{
							name: '龙年限定',
						},
						{
							name: '没有专车',
						},
					],
					// 图片素材
					url: require('@/static/advert/zhl.png'),
				}, {
					// 名字
					title: '三坊七巷',
					// 标签
					tags: [{
							name: '热门玩法',
						},
						{
							name: '背景历史',
						},
						{
							name: '特惠指南',
						},
					],
					// 图片素材
					url: require('@/static/advert/3f7x.png'),
				}, {
					// 名字
					title: '镇海楼',
					// 标签
					tags: [{
							name: '特不好玩',
						},
						{
							name: '龙年限定',
						},
						{
							name: '没有专车',
						},
					],
					// 图片素材
					url: require('@/static/advert/zhl.png'),
				}, ],
				// 选项卡
				tabList: [{
					name: '热销榜单',
				}, {
					name: '好吃好喝',
				}, {
					name: '推荐攻略'
				}],
				// 菜单栏列表数据
				infoList: [{
					// 名字
					title: '三坊七巷',
					// 标签
					tags: [{
							name: '热门玩法',
						},
						{
							name: '背景历史',
						},
						{
							name: '特惠指南',
						},
					],
					// 图片素材
					url: require('@/static/advert/3f7x.png'),
					price: 16.6,
				}, {
					// 名字
					title: '镇海楼',
					// 标签
					tags: [{
							name: '特不好玩',
						},
						{
							name: '龙年限定',
						},
						{
							name: '没有专车',
						},
					],
					// 图片素材
					url: require('@/static/advert/zhl.png'),
				}, {
					// 名字
					title: '三坊七巷',
					// 标签
					tags: [{
							name: '热门玩法',
						},
						{
							name: '背景历史',
						},
						{
							name: '特惠指南',
						},
					],
					// 图片素材
					url: require('@/static/advert/3f7x.png'),
				}, {
					// 名字
					title: '镇海楼',
					// 标签
					tags: [{
							name: '特不好玩',
						},
						{
							name: '龙年限定',
						},
						{
							name: '没有专车',
						},
					],
					// 图片素材
					url: require('@/static/advert/zhl.png'),
				}, {
					// 名字
					title: '三坊七巷',
					// 标签
					tags: [{
							name: '热门玩法',
						},
						{
							name: '背景历史',
						},
						{
							name: '特惠指南',
						},
					],
					// 图片素材
					url: require('@/static/advert/3f7x.png'),
					price: 16.6,
				}, {
					// 名字
					title: '镇海楼',
					// 标签
					tags: [{
							name: '特不好玩',
						},
						{
							name: '龙年限定',
						},
						{
							name: '没有专车',
						},
					],
					// 图片素材
					url: require('@/static/advert/zhl.png'),
				}, {
					// 名字
					title: '三坊七巷',
					// 标签
					tags: [{
							name: '热门玩法',
						},
						{
							name: '背景历史',
						},
						{
							name: '特惠指南',
						},
					],
					// 图片素材
					url: require('@/static/advert/3f7x.png'),
				}, {
					// 名字
					title: '镇海楼',
					// 标签
					tags: [{
							name: '特不好玩',
						},
						{
							name: '龙年限定',
						},
						{
							name: '没有专车',
						},
					],
					// 图片素材
					url: require('@/static/advert/zhl.png'),
				}, {
					// 名字
					title: '三坊七巷',
					// 标签
					tags: [{
							name: '热门玩法',
						},
						{
							name: '背景历史',
						},
						{
							name: '特惠指南',
						},
					],
					// 图片素材
					url: require('@/static/advert/3f7x.png'),
					price: 16.6,
				}, {
					// 名字
					title: '镇海楼',
					// 标签
					tags: [{
							name: '特不好玩',
						},
						{
							name: '龙年限定',
						},
						{
							name: '没有专车',
						},
					],
					// 图片素材
					url: require('@/static/advert/zhl.png'),
				}, {
					// 名字
					title: '三坊七巷',
					// 标签
					tags: [{
							name: '热门玩法',
						},
						{
							name: '背景历史',
						},
						{
							name: '特惠指南',
						},
					],
					// 图片素材
					url: require('@/static/advert/3f7x.png'),
				}, {
					// 名字
					title: '镇海楼',
					// 标签
					tags: [{
							name: '特不好玩',
						},
						{
							name: '龙年限定',
						},
						{
							name: '没有专车',
						},
					],
					// 图片素材
					url: require('@/static/advert/zhl.png'),
				}, {
					// 名字
					title: '三坊七巷',
					// 标签
					tags: [{
							name: '热门玩法',
						},
						{
							name: '背景历史',
						},
						{
							name: '特惠指南',
						},
					],
					// 图片素材
					url: require('@/static/advert/3f7x.png'),
					price: 16.6,
				}, {
					// 名字
					title: '镇海楼',
					// 标签
					tags: [{
							name: '特不好玩',
						},
						{
							name: '龙年限定',
						},
						{
							name: '没有专车',
						},
					],
					// 图片素材
					url: require('@/static/advert/zhl.png'),
				}, {
					// 名字
					title: '三坊七巷',
					// 标签
					tags: [{
							name: '热门玩法',
						},
						{
							name: '背景历史',
						},
						{
							name: '特惠指南',
						},
					],
					// 图片素材
					url: require('@/static/advert/3f7x.png'),
				}, {
					// 名字
					title: '镇海楼',
					// 标签
					tags: [{
							name: '特不好玩',
						},
						{
							name: '龙年限定',
						},
						{
							name: '没有专车',
						},
					],
					// 图片素材
					url: require('@/static/advert/zhl.png'),
				}, ]
			}
		},
		onReachBottom() {
			console.log("触底了");
			// 触发流加载事件
			this.loadmore();
		},
		methods: {
			// 点击轮播图
			swiperClick(e) {
				console.log(`点击了第${e}张轮播图`);
			},
			// 点击宫格
			gridClick(e) {
				console.log(`点击了第${e}个`);
				//故事游玩跳转
				if (e == 3) {
					uni.navigateTo({
						url: this.gridList[e].url
					})
				}
			},
			// 点击选项栏
			tabClick(e) {
				console.log(`点击了${e.name}选项栏`);
				// 点击选项栏重置infoList数据 和 获取路径
			},
			// 流加载
			loadmore() {
				console.log("触发到了");
				// 进行获取，判断是否触底，如果触底修改状态 ，如果没触底则将获取到的数据传入infoList中
				this.loadStatus = 'loading';
				setTimeout(() => {
					this.loadStatus = 'nomore';
				}, 300)
			},
			// 权限获取
			onLoadUser() {
				if (this.user == null) {
					// let res = this.$store.dispatch("user/getUserInfo");
					// console.log(res);
					// if (!res) {
					console.log("获取授权信息");
					this.$store.dispatch("user/authorize");
					// }
				}
			}
		},
		created() {
			this.onLoadUser()
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: var(--background-light);
	}

	.mian-content-top {
		// height: 100%;
		background: linear-gradient(180deg, rgb(2, 160, 255), rgba(2, 160, 255, 0.8), #fafafa);
	}

	.mian-menu {
		padding: 0 10px;

		.menu-grid {
			display: flex;
			flex-wrap: wrap;
			margin: 5px 0;

			.menu-grid-item {
				width: 80px;
				height: 80px;
				position: relative;
				box-sizing: border-box;
				padding: 5px;
				color: var(--text-dark);

				.item-view {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					background: var(--white);
					border-radius: 5px;
				}
			}
		}

		.mian-advert {
			width: 100%;
			border-radius: 12px;
			box-sizing: border-box;
			background: var(--white);
			padding: 3px;

			.title {
				padding: 0 10px 10px;
				color: var(--text-blue);

				h2 {
					padding: 3px 3px;
					display: block;
					color: currentColor;
					font-size: var(--font-size-large);
					font-weight: 600;
				}

				p {
					color: currentColor;
					font-size: var(--font-size-medium);
					display: inline-block;
					padding: 0 3px;

					&::after {
						padding-left: 3px;
						content: "|";
					}

					&:last-of-type {
						&::after {
							content: "";
						}
					}
				}
			}

			.pic {
				padding: 0 10px;

				img {
					border-radius: 5px;
					width: 100%;
					height: 100px;
				}
			}
		}
	}

	.journey {
		padding: 10px;

		.recommend {
			background: var(--white);
			border-radius: 5px;

			.title {
				padding: 0 5px 5px;
				color: var(--text-orange);

				h2 {
					padding: 5px 3px;
					display: block;
					color: currentColor;
					font-size: var(--font-size-default);
					font-weight: 600;
				}

				p {
					color: currentColor;
					font-size: var(--font-size-mini);
					display: inline-block;
					padding: 0 2px;

					&::after {
						padding-left: 2px;
						content: "|";
					}

					&:last-of-type {
						&::after {
							content: "";
						}
					}
				}
			}

			.pic {
				padding: 0 5px;

				img {
					// object-fit: cover;
					border-radius: 3px;
					width: 100%;
				}
			}
		}
	}

	.price {
		color: var(--red);

		&::before {
			content: "￥";
		}

		&::after {
			content: "元";
		}
	}

	.info-list {
		min-height: 100px;
	}
</style>